<template>
    <div class="question-order-detail-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <div class="header-content">
                <div class="header-left">
                    <h2></h2>
                </div>
                <div class="header-right">
                    <el-button @click="handleBack">
                        <el-icon><ArrowLeft /></el-icon>
                        返回
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 详情内容 -->
        <div class="detail-content">
            <el-card shadow="never" class="detail-card">
                <!-- 订单信息、支付信息、下单人信息 -->
                <div class="info-sections">
                    <!-- 订单信息 -->
                    <div class="info-section">
                        <h3>订单信息</h3>
                        <div class="info-item">
                            <span class="info-label">订单ID:</span>
                            <span class="info-value">{{ orderDetail.orderId }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">订单状态:</span>
                            <el-tag :type="getStatusType(orderDetail.orderStatus)" size="small">
                                {{ orderDetail.orderStatus }}
                            </el-tag>
                        </div>
                        <div class="info-item">
                            <span class="info-label">创建时间:</span>
                            <span class="info-value">{{ orderDetail.createTime }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">备注:</span>
                            <span class="info-value">{{ orderDetail.remarks || '-' }}</span>
                        </div>
                    </div>

                    <!-- 支付信息 -->
                    <div class="info-section">
                        <h3>支付信息</h3>
                        <div class="info-item">
                            <span class="info-label">支付单号:</span>
                            <span class="info-value">{{ orderDetail.paymentNumber }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">支付方式:</span>
                            <span class="info-value">{{ orderDetail.paymentMethod }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">支付时间:</span>
                            <span class="info-value">{{ orderDetail.paymentTime }}</span>
                        </div>
                    </div>

                    <!-- 下单人信息 -->
                    <div class="info-section">
                        <h3>下单人信息</h3>
                        <div class="info-item">
                            <span class="info-label">下单账户:</span>
                            <span class="info-value">{{ orderDetail.ordererAccount }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">历史订单总数:</span>
                            <span class="info-value">{{ orderDetail.totalOrders }}个</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">手机号:</span>
                            <span class="info-value">{{ orderDetail.phoneNumber }}</span>
                        </div>
                    </div>
                </div>

                <!-- 问答详情 -->
                <div class="qa-section">
                    <h3>问答详情</h3>
                    <div class="question-content">
                        <div class="question-title">{{ orderDetail.questionTitle }}</div>
                        <div class="question-time">提问时间: {{ orderDetail.questionTime }}</div>
                        <div class="question-text">{{ orderDetail.questionContent }}</div>
                    </div>
                </div>

                <!-- 回答问题 -->
                <div class="answer-section">
                    <h3>回答问题</h3>
                    <div v-if="orderDetail.orderStatus === '服务中'" class="answer-input">
                        <el-input
                            v-model="answerContent"
                            type="textarea"
                            :rows="6"
                            placeholder="请输入回答内容..."
                        />
                        <div class="answer-actions">
                            <el-button type="primary" @click="handleSubmitAnswer">提交回答</el-button>
                        </div>
                    </div>
                    <div v-else-if="orderDetail.orderStatus === '已完成'" class="answer-content">
                        <div class="answer-text">{{ orderDetail.answerContent }}</div>
                        <div class="answer-time">回答时间: {{ orderDetail.answerTime }}</div>
                    </div>
                    <div v-else-if="orderDetail.orderStatus === '已取消'" class="cancel-message">
                        <div class="cancel-text">用户已取消此提问!</div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { ArrowLeft } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();

const id = route.params.id as string;

// 回答内容
const answerContent = ref('');

// 订单详情数据
const orderDetail = reactive({
    orderId: '253',
    orderStatus: '服务中', // 服务中、已完成、已取消
    createTime: '2025-07-09 20:20:13',
    remarks: '',
    paymentNumber: '54545487',
    paymentMethod: '余额支付',
    paymentTime: '2025-07-09 20:20:15',
    ordererAccount: 'MJ1489',
    totalOrders: 45,
    phoneNumber: '188888888',
    questionTitle: '今年能否跳槽顺利?你帮我看看。',
    questionTime: '2025.07.27 10:00',
    questionContent: '是这样我最近总是梦见自己中彩票500万,什么时候能实现了。是这样我最近总是梦见自己中彩票500万,什么时候能实现了。是这样我最近总是梦见自己中彩票500万,什么时候能实现了。',
    answerContent: '那就是真实的,去买张彩票。',
    answerTime: '2025.07.27 10:00'
});

// 获取状态类型
const getStatusType = (status: string) => {
    switch (status) {
        case '服务中':
            return 'warning';
        case '已完成':
            return 'success';
        case '已取消':
            return 'danger';
        default:
            return 'info';
    }
};

// 返回操作
const handleBack = () => {
    router.push('/question-order-list');
};

// 提交回答
const handleSubmitAnswer = () => {
    if (!answerContent.value.trim()) {
        ElMessage.error('请输入回答内容');
        return;
    }
    
    ElMessage.success('回答提交成功');
    // 这里可以调用API提交回答
    // 提交成功后更新订单状态为已完成
    orderDetail.orderStatus = '已完成';
    orderDetail.answerContent = answerContent.value;
    orderDetail.answerTime = new Date().toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    }).replace(/\//g, '-');
};

// 页面初始化
onMounted(() => {
    // 加载订单详情数据
    loadOrderDetail(id);
});

// 加载订单详情
const loadOrderDetail = (orderId: string) => {
    // 模拟加载数据
    console.log('加载订单详情，ID:', orderId);
    
    // 根据订单ID模拟不同的状态
    switch (orderId) {
        case '1':
            orderDetail.orderStatus = '服务中';
            break;
        case '2':
            orderDetail.orderStatus = '已取消';
            break;
        case '3':
            orderDetail.orderStatus = '已完成';
            break;
        default:
            orderDetail.orderStatus = '服务中';
    }
    
    // 这里可以调用API加载数据
};
</script>

<style scoped>
.question-order-detail-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.page-header {
    border-radius: 8px;
    margin-bottom: 20px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left h2 {
    margin: 0;
    color: #333;
    font-size: 24px;
}

.detail-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.detail-card {
    border-radius: 8px;
}

/* 信息区域 */
.info-sections {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.info-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.info-section h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.info-item {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
}

.info-label {
    font-weight: 500;
    color: #606266;
    min-width: 100px;
    margin-right: 10px;
}

.info-value {
    color: #303133;
    font-weight: 400;
}

/* 问答区域 */
.qa-section {
    margin-bottom: 30px;
}

.qa-section h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.question-content {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.question-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.question-time {
    color: #909399;
    font-size: 14px;
    margin-bottom: 15px;
}

.question-text {
    color: #606266;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* 回答区域 */
.answer-section h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.answer-input {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.answer-actions {
    margin-top: 15px;
    text-align: right;
}

.answer-content {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.answer-text {
    color: #606266;
    line-height: 1.6;
    margin-bottom: 10px;
    white-space: pre-wrap;
}

.answer-time {
    color: #909399;
    font-size: 14px;
}

.cancel-message {
    background: #fef0f0;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.cancel-text {
    color: #f56c6c;
    font-size: 16px;
    font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .question-order-detail-container {
        padding: 10px;
    }
    
    .header-content {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .detail-card {
        padding: 20px;
    }
    
    .info-sections {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .info-section {
        padding: 15px;
    }
    
    .question-content,
    .answer-input,
    .answer-content,
    .cancel-message {
        padding: 15px;
    }
}
</style>
